<template>
  <page-frame class="expand-completed" :goBackPage="goBackPage" :showPageRefresh="showPageRefresh"
    v-model:refresh-loading="pageRefreshLoading" @onRefresh="getCompletedList()">
    <template #header-title>已完成</template>
    <div class="main">
      <div class="search-box">
        <page-search></page-search>
      </div>
      <div class="date-selector">
        <div class="date-selected-text">{{ shiftInfo?.date || 'xxxx-xx-xx' }}</div>
        <div class="task-count">{{ taskCount }}</div>
      </div>
      <div class="main-task-info" style="min-height:60vh">
        <div class="task-list">
          <div v-if="taskCount <= 0">
            <!-- 通用错误 -->
            <van-empty description="没有相关信息" />
          </div>

          <div class="task-line" v-for="(li, i) in listData">
            <div class="task-time-item">
              <div class="item-time">{{ li.hour }}</div>
              <div class="task-item-box">
                <div v-if="!li.lists || li.lists.length <= 0">
                  <!-- 通用错误 -->
                  <van-empty description="没有相关信息" />
                </div>
                <!-- system_state : 1 正常 ,反之超時 -->
                <div v-for="(task, t) in li.lists" :key="t" class="task-info task-completed"
                  :class="[{ 'info-timeout': task.system_state != 1 }]" @click="goDetailInfo(task)">
                  <div class="task-name">JAM-{{ task.id }}维修</div>
                  <div class="task-time">{{ task.start }} - {{ task.end }}</div>
                  <div class="task-tag">
                    <div v-if="['5', '6'].includes(task.cancel_state + '')" class="tag-item tag-urgent-3"
                      @click.stop="showNotify(task.reject_reason)">
                      reject
                    </div>
                    <div class="tag-item" :class="[`tag-urgent-${task.urgent || '1'}`]">
                      {{ getUrgentValue(task.urgent) }}
                    </div>
                    <div class="tag-item tag-machine">{{ task.short }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="task-line"></div>
        </div>
      </div>
      <page-footer isMainPage>已经到达底部了</page-footer>
    </div>
  </page-frame>
</template>

<script lang="ts">
import { CompletedApi } from '@/apis/completed/index';
import { type RequestCode } from '@/server/base';
import pageBase from '@/views/mixins/page-base';
import pageRefresh from '@/views/mixins/page-refresh'
import { PageFrame, PageFooter, PageSearch } from '@/importComponents'
import { getCurrentShift } from '@/apis';

export default {
  mixins: [pageBase, pageRefresh],
  components: { PageFrame, PageSearch, PageFooter },
  props: {
    goBackPage: Function,
  },
  data() {
    return {
      info: [] as InfoObject[],
    }
  },
  computed: {
    taskCount(): number {
      if (!this.info || this.info.length <= 0) {
        return 0;
      }
      return this.info.reduce((previousValue: number, currentValue: InfoObject) => {
        return previousValue + currentValue.lists.length;
      }, 0)
    },
    listData() {
      return this.info.filter(item => item.lists.length > 0);
    },
  },
  methods: {
    /**
     * 获取已完成列表
     */
    getCompletedList() {
      this.pageRefreshLoading = true;
      CompletedApi.getCompleted().then((res: RequestCode) => {
        this.pageRefreshLoading = false;
        this.info = res.data;
      })
    },
    /**
     * 去详情页面
     */
    goDetailInfo(item: object) {
      this.$router.push({
        name: 'completed-detail', params: {
          value: this.getParamsString(item)
        }
      })
    }
  },
  created() {
    this.getCompletedList();
  }
}
type InfoObject = { hour: string, lists: any[] };

</script>

<style lang="scss" scoped>
@import '@/assets/expand.scss';

.expand-completed {
  .tag-item {
    zoom: 0.7 !important;
  }

  .tag-machine {
    background: var(--completed-task-tag-bg-color);
    color: var(--completed-task-tag-color);
  }

  @include tag-urgent-color(1);
  @include tag-urgent-color(2);
  @include tag-urgent-color(3);
}
</style>
